function WebGLImageShader()
{
	this.shaderProgram = null;
	this.vertexPositionAttribute = null;
	this.textureCoordAttribute = null;
	
	//texture resource
	this.imageTexture = null;
	this.image = null;
	
	//buffer
	this.verticesBuffer = null;
	this.textureCoordBuffer = null;			
}
	
//
// initShaders
//
// Initialize the shaders, so WebGL knows how to light our scene.
//
WebGLImageShader.prototype.initShaders = function(gl, vsName, fsName) 
{
  var fragmentShader = this.getShader(gl, vsName);
  var vertexShader = this.getShader(gl, fsName);
  
  // Create the shader program
  
  this.shaderProgram = gl.createProgram();
  gl.attachShader(this.shaderProgram, vertexShader);
  gl.attachShader(this.shaderProgram, fragmentShader);
  gl.linkProgram(this.shaderProgram);
  
  // If creating the shader program failed, alert
  
  if (!gl.getProgramParameter(this.shaderProgram, gl.LINK_STATUS)) 
  {
	alert("Unable to initialize the shader program.");
  }
  
  gl.useProgram(this.shaderProgram);
  
  this.vertexPositionAttribute = gl.getAttribLocation(this.shaderProgram, "a_position");
  gl.enableVertexAttribArray(this.vertexPositionAttribute); 
  
  this.textureCoordAttribute =   gl.getAttribLocation(this.shaderProgram, "a_texCoord"); 
  gl.enableVertexAttribArray(this.textureCoordAttribute);  
 
  this.resolutionLocation = gl.getUniformLocation(this.shaderProgram, "u_resolution");   
  
  if(!this.resolutionLocation || !this.textureCoordAttribute)
  {
	  alert("resolutionLocation is null");
  }
}

WebGLImageShader.prototype.initBuffers = function(gl) 
{
  
  // Create a buffer for the cube's vertices.
  
  this.verticesBuffer = gl.createBuffer();
  
  // Select the cubeVerticesBuffer as the one to apply vertex
  // operations to from here out.
  
  gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
  
  // Now create an array of vertices for the cube.
  var h = canvas.height;
  var w = canvas.width;
	 
  
  var vertices = [
					0, 0,
					w, 0,
					0, h,
					0, h,
					w, 0,
					w, h
					];
  
  // Now pass the list of vertices into WebGL to build the shape. We
  // do this by creating a Float32Array from the JavaScript array,
  // then use it to fill the current vertex buffer.
  
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  
  this.textureCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, this.textureCoordBuffer);
  var textureCoord = [
					0.0,  0.0,
					1.0,  0.0,
					0.0,  1.0,
					0.0,  1.0,
					1.0,  0.0,
					1.0,  1.0];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoord), gl.STATIC_DRAW);
	  
}

WebGLImageShader.prototype.drawImage = function(gl) 
{
  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);	  

  gl.useProgram(this.shaderProgram);
  gl.uniform2f(this.resolutionLocation, canvas.width*1.0, canvas.height*1.0);
  
  //vertex position
  gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
  gl.vertexAttribPointer(this.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
  
  //texture coordinate
  gl.bindBuffer(gl.ARRAY_BUFFER, this.textureCoordBuffer);
  gl.vertexAttribPointer(this.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
  
  //active texture
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, this.imageTexture);
  gl.uniform1i(gl.getUniformLocation(this.shaderProgram, "u_image"), 0);	  
  
  //draw
  gl.drawArrays(gl.TRIANGLES, 0, 6);	  
 
}

//
// getShader
//
// Loads a shader program by scouring the current document,
// looking for a script with the specified ID.
//
WebGLImageShader.prototype.getShader = function(gl, id) 
{
  var shaderScript = document.getElementById(id);
  
  // Didn't find an element with the specified ID; abort.
  
  if (!shaderScript) 
  {
	return null;
  }
  
  // Walk through the source element's children, building the
  // shader source string.
  
  var theSource = "";
  var currentChild = shaderScript.firstChild;
  
  while(currentChild) 
  {
	if (currentChild.nodeType == 3)
	{
	  theSource += currentChild.textContent;
	}
	
	currentChild = currentChild.nextSibling;
  }
  
  // Now figure out what type of shader script we have,
  // based on its MIME type.
  
  var shader;
  
  if (shaderScript.type == "x-shader/x-fragment") 
  {
	shader = gl.createShader(gl.FRAGMENT_SHADER);
  } 
  else if (shaderScript.type == "x-shader/x-vertex")
  {
	shader = gl.createShader(gl.VERTEX_SHADER);
  } 
  else 
  {
	return null;  // Unknown shader type
  }
  
  // Send the source to the shader object
  
  gl.shaderSource(shader, theSource);
  
  // Compile the shader program
  
  gl.compileShader(shader);
  
  // See if it compiled successfully
  
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
  {
	alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
	return null;
  }
  
  return shader;
}	


